<template>
    <BasicModal
      v-bind="$attrs"
      title="详情"
      @register="registerModal"
      show-footer
      width="50%"
      @ok="handleSubmit"
    >
      <template #footer>
        <a-button @click="closeModal" :loading="btnLoading">取消</a-button>
        <a-button
          type="primary"
          v-if="isReply"
          @click="handleSubmit(false)"
          :loading="btnLoading"
          >保存</a-button
        >
      </template>
      <Form ref="form" :model="form" :rules="rules" label-width="100px">
        <FormItem label="会员名称">
          {{ detail.data.member.name }}
        </FormItem>
        <FormItem label="会员电话">
          {{ detail.data.member.mobile }}
        </FormItem>
        <FormItem label="反馈类型">
          {{ detail.data.feedback.title }}
        </FormItem>
        <FormItem label="内容">
          {{ detail.data.feedback.content }}
        </FormItem>
        <FormItem label="图片">
          <div class="flex gap-2">
            <img :src="item" alt="展示图" width="120px" height="120px" v-for="(item, index) in detail.data.images"/>
          </div>
        </FormItem>
        <FormItem label="回复内容" v-if="detail.data.reply && !isReply">
          <div>{{ detail.data.reply.content }}</div>
          <div class="text-right color-gray-400">
            {{ detail.data.reply.createDate? dayjs(detail.data.reply.createDate).format('YYYY-MM-DD HH:mm:ss') : '' }}
          </div>
        </FormItem>
        <FormItem label="回复内容" v-if="isReply">
          <Textarea maxlength="200" v-model:value="content" placeholder="请输入回复内容" />
        </FormItem>
      </Form>
    </BasicModal>
  </template>
  <script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { Form, FormItem, Textarea } from 'ant-design-vue'
  import dayjs from 'dayjs';
  import { useMessage } from '@/hooks/web/useMessage';
  import { defHttp } from '@/utils/http/axios';

  const emit = defineEmits(['register']);
  const detail = reactive({
    data: {
      member: {
        name: '',
        mobile: '',
      },
      feedback: {
        title: '',
        content: '',
      },
      images: [],
      reply: {
        content: '',
        createDate: '',
      },
    }
  })
  const content = ref()
  const isReply = ref(false)
  const dataId = ref(null)
  const { createMessage } = useMessage();
  const [registerModal, { closeModal, changeLoading }] =
  useModalInner(async (data) => {
    // 是否是回复按钮
    isReply.value = data.isReply;
    dataId.value = data.id;
    content.value = '';
    getDetail(data.id)
  });
  const getDetail = async (id) => {
    changeLoading(true);
    try {
      detail.data = await defHttp.get({ url: `/feedback/feedback/detail`, params: { id } });
    } finally {
      changeLoading(false);
    }
  }

  const handleSubmit = async () => {
    if (!content.value) {
      createMessage.error('请输入回复内容');
      return;
    }
    changeLoading(true);
    try {
      const res = await defHttp.post({
        url: `/feedback/feedback/saveReply`,
        data: {
          feedbackId: dataId.value,
          content: content.value,
        },
      });
      createMessage.success(res);
      closeModal();
    } finally {
      changeLoading(false);
    }
  }
</script>
  